/* 头部 */
.header{
  background-color:transparent;
  position: sticky;
  left:0;
  top:0;
  width:100%;
  z-index:1000;
  padding:1em 0em;

  .navbar-inverse{
    background-color:transparent;
    border-color:transparent;

    .navbar-nav>li>a{
      color:#fff;
    }
  }

  .logo{
    text-transform: uppercase;
    color:#fff;
    transition:all linear .1s;

    &:hover{
      transform:scale(1.2);
    }
  }

  .menu{
    a{
      text-transform: uppercase;
      color:#fff;
      transition:all linear .1s;
      border-bottom:3px solid transparent;

      span{
        display: inline-block;
        transition:all linear .1s;
      }

      &:hover{
        border-bottom:3px solid #fcac45;

        span{
          transform:scale(1.2);
        }
      }
    }
  }

  // 响应式兼容 768  max-width
  // 当前屏幕大小 x       x <= 768   max-width:768  x > 768  min-width:768px
  @media screen and (max-width:768px){
    .menu{
      a{
        text-align: center;
      }
    }
  }
}

/* 底部 */
.footer{
  background:#070707;
  padding:3em 0em;

  .box{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;

    .copyright{
      color:#b2b2b2;
    }

    .links{
      display: flex;
      width:25%;
      justify-content: space-around;

      a{
        width:2.5em;
        height:2.5em;
        border:3px solid #b2b2b2;
        border-radius: 100%;
        transition:all linear .3s;
        flex-shrink: 0;

        &:hover{
          transform:translateY(-10px);
          box-shadow: 0px 0px 10px 5px #b2b2b2;
        }

        img{
          width:100%;
          height:100%;
        }
      }
    }
  }

  @media screen and (max-width:520px){
    .box{
      flex-wrap: wrap;

      .copyright,.links{
        width:100%;
      }

      .copyright{
        text-align: center;
        margin-bottom:1em;
      }
    }
  }
}

/* 返回顶部 */
#gotop {
  position: fixed;
  bottom: 90px;
  right: 0%;
  width: 80px;
  cursor: pointer;
  z-index: -99998;
  opacity: 0;

  transition: all linear .4s;

  &:hover {
      animation: rubberBand 1s;
  }

  @keyframes rubberBand {
      from {
        transform: scale3d(1, 1, 1);
      }
    
      30% {
        transform: scale3d(1.25, 0.75, 1);
      }
    
      40% {
        transform: scale3d(0.75, 1.25, 1);
      }
    
      50% {
        transform: scale3d(1.15, 0.85, 1);
      }
    
      65% {
        transform: scale3d(.95, 1.05, 1);
      }
    
      75% {
        transform: scale3d(1.05, .95, 1);
      }
    
      to {
        transform: scale3d(1, 1, 1);
      }
    }
}